<template>
    <div>
        <Col span="12">
            <Card>
                <p slot="title" style="height:25px;">
                    <Icon type="plus-round"></Icon> 订单详情
                </p>
                <Form :label-width="80">

                    <Form-item label="订单状态">
                        <div v-if="formValidate.status==2">
                            <Steps :current="1" status="error" size="small">
                                <Step title="待付款" content="用户已下单"></Step>
                                <Step title="已取消" content="订单取消"></Step>
                            </Steps>
                        </div>
                        <div v-else>
                            <div v-if="formValidate.type==1">
                                <Steps :current="currentStatus" size="small">
                                    <Step title="待付款" content="等待用户付款"></Step>
                                    <Step title="已付款" content="等待后台发货"></Step>
                                    <Step title="已发货" content="等待用户确认收货"></Step>
                                    <Step title="已收货" content="等待用户评价"></Step>
                                    <Step title="已评价" content="订单完成"></Step>
                                </Steps>
                            </div>
                            <div v-else>
                                <Steps :current="currentStatus" size="small">
                                    <Step title="待付款" content="等待用户付预售款"></Step>
                                    <Step title="已付款" content="等待用户付尾款"></Step>
                                    <Step title="已付尾款" content="等待后台发货"></Step>
                                    <Step title="已发货" content="等待用户确认收货"></Step>
                                    <Step title="已收货" content="等待用户评价"></Step>
                                    <Step title="已评价" content="订单完成"></Step>
                                </Steps>
                            </div>
                        </div>
                    </Form-item>
                    <Form-item label="订单ID">{{formValidate.order_id}}</Form-item>
                    <Form-item label="订单编号">{{formValidate.order_sn}}</Form-item>
                    <Form-item label="订单数量">{{formValidate.goods_num}}</Form-item>
                    <Form-item label="产品名称">{{formValidate.name_list}}</Form-item>
                    <Form-item label="订单分类">{{formValidate.type}}</Form-item>
                    <Form-item label="订单总价">{{formValidate.total_pay/100}}</Form-item>
                    <Form-item label="优惠">{{formValidate.free_pay/100}}</Form-item>
                    <Form-item label="手续费">{{formValidate.fee_pay/100}}</Form-item>
                    <Form-item label="用户留言">{{formValidate.leave_word}}</Form-item>
                    <Form-item label="备注">{{formValidate.remarks}}</Form-item>
                    <Form-item label="下单时间">{{formValidate.created_at}}</Form-item>
                    <Form-item v-if="(formValidate.type==1 && formValidate.status==3) || (formValidate.type==2 && formValidate.status==7)">
                        <Button type="primary" @click="handleSend()">确认发货</Button>
                    </Form-item>
                </Form>
            </Card>
        </Col>
        <Col span="12">
            <Card>
                <p slot="title">
                    <Icon type="plus-round"></Icon> 订单产品
                </p>
                <div>
                    <Table stripe :columns="columns" :data="rows" border></Table>
                </div>
            </Card>
            <Card>
                <p slot="title">
                    <Icon type="plus-round"></Icon> 用户信息
                </p>
                <Form :label-width="80">
                    <Form-item label="用户名称">{{formValidate.user.username}}</Form-item>
                    <Form-item label="昵称">{{formValidate.user.nickname}}</Form-item>
                    <Form-item label="手机号">{{formValidate.user.mobile}}</Form-item>
                    <Form-item label="email">{{formValidate.user.email}}</Form-item>
                </Form>
            </Card>
            <Card>
                <p slot="title">
                    <Icon type="plus-round"></Icon> 收货地址
                </p>
                <Form :label-width="80">
                    <Form-item label="收货人">{{formValidate.order_address.receiver_name}}</Form-item>
                    <Form-item label="手机号">{{formValidate.order_address.mobile}}</Form-item>
                    <Form-item label="地址">{{formValidate.order_address.province+formValidate.order_address.city+formValidate.order_address.district}}</Form-item>
                    <Form-item label="详细地址">{{formValidate.order_address.full_address}}</Form-item>
                </Form>
            </Card>
            <Card>
                <p slot="title">
                    <Icon type="plus-round"></Icon> 支付状态
                </p>
                <Form :label-width="80" v-if="formValidate.order_pay">
                    <Timeline>
                        <Form-item label="支付状态">{{formValidate.order_pay.status==1?'未支付':(formValidate.order_pay.status==2?'已支付':'取消')}}</Form-item>
                        <Form-item label="更新时间">{{formValidate.order_pay.updated_at}}</Form-item>
                    </Timeline>
                </Form>
            </Card>
            <Card>
                <p slot="title">
                    <Icon type="plus-round"></Icon> 状态记录
                </p>
                <Form :label-width="80">
                    <Timeline>
                        <Timeline-item v-for="item in formValidate.order_status_logs" :key="index">
                            {{item.created_at}}
                            {{item.status==1?'待付款':'' +
                            item.status==2?'关闭订单':'' +
                            item.status==3?'已付款':'' +
                            item.status==4?'已发货':'' +
                            item.status==5?'已收货':'' +
                            item.status==6?'已评价':'' +
                            item.status==7?'已付尾款':''}}
                        </Timeline-item>
                    </Timeline>
                </Form>
            </Card>
            <Card>
                <p slot="title">
                    <Icon type="plus-round"></Icon>评论
                </p>
                <Form :label-width="80" v-if="formValidate.order_comment">
                    <Form-item label="评价">{{formValidate.order_comment.level==1?'差评':(formValidate.order_comment.level==2?'中评':'好评')}}</Form-item>
                    <Form-item label="内容">{{formValidate.order_comment.content}}</Form-item>
                    <Form-item label="回复">{{formValidate.order_comment.reply}}</Form-item>
                </Form>
            </Card>
        </Col>
    </div>
</template>

<script>
    export default {
        components:{

        },
        data () {
            return {
                order_id: 0,
                currentStatus: 0,
                formValidate: null,
                rows: [],
                columns: [
                    {
                        title: '产品ID',
                        align: 'center',
                        key: 'relation_id',
                        width: 80,
                    }, {
                        title: '订单号',
                        align: 'center',
                        key: 'order_sn',
                        width: 150,
                    }, {
                        title: '产品名称',
                        align: 'center',
                        key: 'goods_name',
                        width: 150,
                    }, {
                        title: '数量',
                        align: 'center',
                        key: 'num',
                        width: 80,
                    }, {
                        title: '单价',
                        align: 'center',
                        key: 'price',
                        width: 80,
                        render: (h, params) => {
                            return params.row.price/100;
                        }
                    }, {
                        title: '总价',
                        align: 'center',
                        key: 'total_pay',
                        width: 80,
                        render: (h, params) => {
                            return params.row.total_pay/100;
                        }
                    },
                ],
            }
        },
        methods: {
            handleSend () {
                this.$http.post('admin/order/sendGoods', {order_id: this.order_id}).then((res) => {
                    var d = res.data;
                    if (d.code == 0) {
                        this.$Notice.success({
                            title: 'Success',
                            desc: '操作成功'
                        });
                        this.$router.push({
                            name: 'orderList'
                        });
                    } else {
                        this.$Notice.error({
                            title: 'Error Warning',
                            desc: `Error：${d.msg}<br>`
                        });
                    }
                });
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            getOne () {
                this.$http.post('admin/order/getOne', this.$qs.stringify({order_id: this.order_id})).then((res) => {
                    var d = res.data;console.log(d);
                    if (d.code == 0) {
                        this.formValidate = d.data;
                        this.rows = d.data.order_goods;
                        if (d.data.status==1) {
                            this.currentStatus = 0;
                        } else if (d.data.status==7) {
                            this.currentStatus = 2;
                        } else {
                            this.currentStatus = d.data.status-2;
                        }
                    } else {
                        this.$Notice.error({
                            title: 'Error Warning',
                            desc: `Error：${d.msg}<br>`
                        });
                    }
                });
            },
        },
        mounted() {
            this.$nextTick(() => {
                this.order_id = this.$route.query.order_id;
                if (this.order_id) {
                    this.getOne();
                }
            });
        },
    };
</script>
